<template>
	<s-layout class="set-wrap" title="">
		<uni-forms ref="form" :modelValue="state.formData" border>
			<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
				<view class="title ss-m-b-30"> 相关描述 </view>
				<view class="textarea">
					<uni-easyinput :inputBorder="false" type="textarea" v-model="state.formData.content"
						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
						placeholder="同学~请描述您遇到的问题，建议上传照片,会有专业老师为您解答!" clearable></uni-easyinput>
					<s-uploader v-model:url="state.formData.images" fileMediatype="image" limit="9" mode="grid"
						:imageStyles="{ width: '168rpx', height: '168rpx' }"></s-uploader>
				</view>
			</view>
		</uni-forms>
		<view class="submit ss-p-x-30 ss-p-y-10">
			<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="onSubmit">
				提交
			</button>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		ref,
		unref
	} from 'vue';
	import sheep from '@/sheep';

	const filesRef = ref(null);
	const state = reactive({
		formData: {
			group: '',
			content: '',
			images: []
		},
	});

	
	onLoad(async (options) => {
		state.formData.group = options.group
	});
	
	async function onSubmit() {
		console.log(state.formData);
		
		if (!state.formData.content) {
			sheep.$helper.toast('请描述您遇到的问题');
			return;
		}
		

		const {
			code
		} = await sheep.$api.app.zhuiwen(state.formData);
		if (code === 1) {
			sheep.$router.go('/pages/index/user?path=question');
		}
	}
</script>

<style lang="scss" scoped>
	
	.uni-forms {
		width: 100%;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: normal;
	}

	:deep() {
		.uni-easyinput__placeholder-class {
			color: #bbbbbb !important;
			font-size: 28rpx !important;
			font-weight: 400 !important;
			line-height: normal !important;
		}

		.uni-forms-item__label .label-text {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-list-item__content-title {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 4rpx !important;
			padding-left: 20rpx !important;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.icon-del-box {
			width: 32rpx;
			height: 32rpx;
			top: 0;
			right: 0;

			.icon-del {
				width: 24rpx;
			}
		}
	}

	.radio-subtitle {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
	}

	.textarea {
		min-height: 322rpx;
		background: #f9fafb;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 30rpx 20rpx 46rpx 0;

		.area {
			height: 238rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #333;
			line-height: 50rpx;
			width: 100%;
		}

		.pl-style {
			font-size: 24rpx;
			color: #b1b3c7;
			font-weight: 500;
		}
	}

	.submit{margin-top: 40px; display: flex;justify-content: center;}
	.submit-btn {
		width: 80%;
		height: 84rpx;
		border-radius: 37rpx;
	}

</style>